<!--
/**
* Author: gaohui
* Date: 2023-03-01 16:53
* Desc: RouterCompTest 测试路由组件
*/
-->

<template>
  <div class="mt10">获取到的query参数:{{ queryStr }}</div>
  <div class="mt10">
    <el-button @click.stop="getRouteParams">获取路由参数</el-button>
  </div>
</template>

<script name="RouterCompTest" lang="ts" setup>
import { ref } from "vue";
import { useRoute } from "vue-router";

const queryStr = ref("");

// 获取不到params的原因可参考该文章 https://blog.csdn.net/lhkuxia/article/details/126832654
const route = useRoute();
const getRouteParams = () => {
  const name = route?.query?.name;
  queryStr.value = `name=${name}`;
};
</script>
<style lang="scss" scoped></style>
